<template>
  <div class="mod-config">
    <!-- 操作表单 -->
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.keyword" placeholder="请输入标题" clearable @clear="getDataList()"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">搜索</el-button>
<!--        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>-->
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <!--      <el-table-column type="index" align="center" width="50" />-->
      <el-table-column align="center" type="index" width="80" label="序号" />
      <el-table-column prop="name" label="模型名称" align="center">
      </el-table-column>
<!--      <el-table-column  label="描述" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{metaInfo.description}}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="category" label="流程分类" align="center" />
      <el-table-column prop="revision" label="版本号" align="center" />
      <el-table-column prop="key" label="模型标识" align="center" />
<!--      <el-table-column prop="deploymentTime" label="部署时间" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <span> {{timestampToTime(scope.row)}}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->

      <el-table-column fixed="right" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-dropdown>
            <el-button type="primary">
              功能
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <!--              <el-dropdown-item @click.native="addOrUpdateHandle(scope.row.id)">查看</el-dropdown-item>-->
<!--              <el-dropdown-item @click.native="handlePic(scope.row)">流程图</el-dropdown-item>-->
              <el-dropdown-item v-if="scope.row.suspend === true" @click.native="handleDeploy(scope.row)">生效</el-dropdown-item>
              <el-dropdown-item v-else @click.native="handleDeploy(scope.row)">失效</el-dropdown-item>
              <el-dropdown-item @click.native="deleteHandle(scope.row.deploymentId)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <el-dialog :visible.sync="showPicDialog" title="流程图">
      <img :src="actPicUrl" width="100%">
    </el-dialog>
    <!-- 弹窗, 新增 / 修改 -->
<!--    <model-add-or-update ref="modelAddOrUpdate" @refreshDataList="getDataList"></model-add-or-update>-->
<!--    <model-delete ref="modelDetail"></model-delete>-->
  </div>
</template>

<script>
import formatDate from '../../../utils/dateformater'
export default {
  data() {
    return {
      showPicDialog: false,
      actPicUrl: '',
      dataForm: {
        keyword: ''
      },
      type: 2,
      dataList: [],
      metaInfo: {},
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: { formatDate },
  mounted() {
    this.getDataList()
  },
  // filters: {
  //   formatDate(time) {
  //     var data = new Date(time)
  //     return formatDate(data, 'yyyy-MM-dd')
  //   }
  // },
  methods: {
    // 获取数据列表
    async getDataList(isSearch) {
      this.dataListLoading = true
      var res = await this.$http.post('/process/page', {
        page: this.pageIndex,
        limit: this.pageSize
      })
      this.dataList = res.data.list
      // this.dataList.forEach(x => {
      //   this.metaInfo = JSON.parse(x.metaInfo)
      // })
      this.totalPage = res.data.totalCount
      this.dataListLoading = false
    },
    // let src = this.$http.adornUrl(
    //   `/modeler/modeler.html?modelId=${row.id}`
    // )this.$http.adornUrl
    async handlePic(row) {
      // let time = new Date().getTime()
      // let t = time + parseInt(Vue.cookie.get('timeDiff') || 0)
      // let nonce = parseFloat(Math.random() * 0.3 + 1, 10).toFixed(10) * 1e10
      // // let sign = this.getSign(sign)
      // let token = this.$cookie.get('token')
      // this.showPicDialog = true
      // let res = await this.$http({
      //  url: this.$http.adornUrl(`/process/resource/` + row.deploymentId + '/' + row.processonDefinitionId + '/image'),
      //  // url: this.$http.adornUrl(`/process/resource/` + row.deploymentId + '/' + row.processonDefinitionId + '/image' + '?' + 't=' + t + '&' + 'token=' + token + '&' + 'nonce=' + nonce + '&' + 'sign=' + sign),
      //   method: 'get'
      // })
      // console.log(res)
      this.showPicDialog = true
      this.actPicUrl = this.$http.adornUrl(`/process/resource/` + row.deploymentId + '/' + row.processonDefinitionId + '/image')
    },
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 生效失效
    handleDeploy(row) {
      this.$confirm(`确定要进行部署操作吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl(`/process/status/${row.processonDefinitionId}/${row.suspend === false ? 'suspend' : 'active'}`),
          method: 'post'
        }).then(data => {
          if (data && data.code === 200) {
            this.$notify.success({
              title: '提示',
              message: '执行成功'
            })
            this.dataForm.page > 1 && this.dataList.length <= 1 && this.dataForm.page--
            this.getDataList()
          } else {
            this.$notify.warning({
              title: '提示',
              message: data.msg
            })
          }
        })
      })
    },
    timestampToTime (row, column) {
      var date = new Date(row.deploymentTime)
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = date.getDate() + ' '
      var h = date.getHours() + ':'
      var m = date.getMinutes() + ':'
      var s = date.getSeconds()
      return Y + M + D + h + m + s
    },
    // 删除
    async deleteHandle(deleteHandle) {
      var confirm = await this.$confirm(`确定要进行删除操作吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      if (confirm !== 'confirm') return

      let res = await this.$http({
        url: this.$http.adornUrl(`/process/del/${deleteHandle}`),
        method: 'post'
      })
      if (res && res.code === 200) {
        this.$notify.success({ title: '成功', message: '成功' })
        this.pageIndex > 1 && this.dataList.length <= 1 && this.pageIndex --
        this.getDataList()
      } else {
        this.$notify.error({ title: '错误', message: res.msg })
      }
    }
  }
}
</script>

<style scoped>
</style>
